<!-- inline styles related to this page -->
<link rel="stylesheet" type="text/css" href="styles/vip/zyl店员——人.css"/>
<link rel="stylesheet" type="text/css" href="styles/vip/zy店员——收银.css"/>
<style>

	.zGslider {
		position: relative;
	}

	.zGslider div {}

	.zGbox {
		position: relative;
		overflow: hidden;
	}

	.zGbox ul {
		position: absolute;
		margin: 0;
	}

	li {
		list-style: none;
		float: left;
	}

	.zGslider .zGbox {
		width: 1049px;
		height: 800px;
		overflow: hidden;
	}

	#zGBtn {
		width: 118px;
		height: 46px;
		background: #3cbced;
		margin-left: 300px;
		margin-top: -50px;
		cursor: pointer;
		font-size: 18px;
		line-height: 46px;
		color: white;
		border-radius: 4px;
		text-align:center;
	}
</style>

<!-- begin -->
<div style="width:200px;height: 100px;
background: #3A87AD;text-align: center;line-height: 100px;font-size: 3em;color: white;border-radius: 200px;margin-left: 260px;margin-top: 200px;
display: none;" id="zGtan">保存成功!
</div>
<div class="zGslider">
	<div class="zGbox">

		<!--车-->
		<ul>
			<li style="width: 1049px; overflow: hidden; background: #fff;">
				<div class="zycontent" style="margin-top: -50px;">

					<div class="zyinput">
						<form>
							<span class="zybg"><i class="ace-icon fa fa-cog  bigger-230"></i></span>
							<span>*</span>店员ID：<input type="text" placeholder="12345678" class="zytext"/><br/>
							<span>*</span>店员名称：<input type="text" placeholder="请输入店员名称" class="zytext"/><br/><br/>
							<span>*</span>性别：<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl">
								<span style="color: black;">&nbsp;男&nbsp;</span>
							</span>
							<img src="images/img/a1.png" style="width: 12px;height: 12px;margin-top: 10px;margin-right: 30px;"/>
							<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl">
								<span style="color: black;">女&nbsp;</span>
							</span>
							<img src="images/img/a2.png" style="width: 12px;height: 12px;margin-top: 5px;"/><br/>
							<span>*</span>联系电话：<input type="text" placeholder="请输入店员联系电话" class="zytext"/><br/>
							<span>*</span>登录密码：<input type="password" placeholder="请输入登录密码" class="zymima"/><br/>
							<span>*</span>店员角色：
							<select style="margin-left: -1px;margin-left: 15px;">
								<option>收银员</option>
							</select><br/><br/> &nbsp;&nbsp;店员权限：&nbsp;&nbsp;&nbsp;&nbsp;

							<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl"></span><img src="images/img/png1.png" style="margin-left: 5px;"/>
							<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl"></span>　<img src="images/img/png2.png"/>
							<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl"></span>　<img src="images/img/png3.png"/>
							<input name="form-field-radio" type="radio" class="ace">
							<span class="lbl"></span>　<img src="images/img/png4.png"/>
						</form>
					</div>

					<div class="zybutton" style="margin-top: -28px;margin-left: 100px;">
						<table>
							<tr>
								<td style="font-size: 15px; margin-top: -24px;">商品</td>
								<td style="padding-left: 80px;">查看权</td>
								<td style="padding-left: 12px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;">新增权</td>
								<td style="padding-left: 12px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;">编辑权</td>
								<td style="padding-left: 12px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;">删除权</td>
								<td style="padding-left: 12px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

							</tr>

							<tr>
								<td style="font-size: 15px;"></td>
								<td style="padding-left: 80px; padding-top: 28px;">进价权</td>
								<td style="padding-left: 12px; padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

							</tr>

							<tr>
								<td style="font-size: 15px; padding-top: 27px;">快速入库</td>
								<td style="padding-left: 80px;padding-top: 27px;">查看权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">新增权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">编辑权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">删除权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

							</tr>

							<tr>
								<td style="font-size: 15px; padding-top: 27px;">库存管理</td>
								<td style="padding-left: 80px;padding-top: 27px;">查看权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 28px;">新增权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">编辑权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">删除权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

							</tr>
							<tr>
								<td></td>
								<td style="padding-left: 80px;padding-top: 27px;">入库权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td style="padding-left:30px ;padding-top: 27px;">出库权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td style="padding-left:30px ;padding-top: 27px;">审核权</td>
								<td style="padding-left: 12px;padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

							</tr>

							<tr>
								<td style="font-size: 15px;"></td>
								<td style="padding-left: 80px; padding-top: 27px;">所有权限</td>
								<td style="padding-left: 12px; padding-top: 28px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
							</tr>

						</table>
						<input type="submit" value="保存"
							   style="margin-top: 20px;outline:none;width: 117px;height: 47px;color: #bfbfbf;border: 2px solid #a4a4a4; background: white;border-radius: 4px;font-weight: bold;font-size: 16px;"/>
						<p id="zGBtn" style="outline: none;">保存并新增</p>

					</div>
					<!--jq代码-->

				</div>
			</li>

			<!--zyl电商-->
			<li style="width: 1049px;">
				<div class="zylcontent" style="margin-top: -50px;">
					<div class="zylinput">
						<span id="zylspan">
		<i class="ace-icon fa fa-cog  bigger-230"></i>

	</span>

						<span>*</span>店员ID：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" placeholder="12345678"
																		  class="zyltext"/><br/>
						<span>*</span>店员名称：<input type="text" placeholder="请输入店员名称" class="zyltext"/><br/><br/>
						<p><span>*</span>性别：<span class="store-rad" style="margin-left: 50px;"></span><input
								name="form-field-radio" type="radio" class="ace">
							<span class="lbl" style="color: black;">  男</span><img src="images/img/a1.png"
																				   style="width: 12px;height: 12px;margin-left: 5px;margin-right: 30px;"/><input
									name="form-field-radio" type="radio" class="ace">
							<span class="lbl" style="color: black;">  女</span><img src="images/img/a2.png"
																				   style="width: 12px;height: 14px;margin-left: 5px;"/>
						</p>
						<span>*</span>联系电话：<input type="text" placeholder="请输入店员联系电话" class="zyltext"/><br/>
						<span>*</span>登录密码：<input type="password" placeholder="请输入登录密码" class="zylmima"/><br/>
						<span>*</span>店员角色：
						<select style="margin-left: -1px;margin-left: 16px;">
							<option>收银员</option>
						</select><br/><br/> 店员权限：&nbsp;&nbsp;
						<input name="form-field-radio" type="radio" class="ace">
						<span class="lbl"></span> <img src="images/img/png1.png"
													   style="margin-left: 5px;margin-right: 20px;"/>
						<input name="form-field-radio" type="radio" class="ace">
						<span class="lbl"></span> <img src="images/img/png2.png"
													   style="margin-left: 5px;margin-right: 20px;"/>
						<input name="form-field-radio" type="radio" class="ace">
						<span class="lbl"></span> <img src="images/img/png3.png"
													   style="margin-left: 5px;margin-right: 20px;"/>
						<input name="form-field-radio" type="radio" class="ace">
						<span class="lbl"></span> <img src="images/img/png4.png"/>
					</div>

					<div class="zylbutton">
						<table>
							<tr>
								<td>营销</td>
								<td>查看权</td>
								<td>
									<label><input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
												  type="checkbox"
									>
										<span class="lbl"></span>
									</label>

								</td>
								<td>新增</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td>编辑</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td>删除</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
							</tr>

							<tr>
								<td>报表</td>
								<td>查看权</td>
								<td><label>
									<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
										   type="checkbox">
									<span class="lbl"></span>
								</label>
								</td>
								<td>新增</td>
								<td><label>
									<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
										   type="checkbox">
									<span class="lbl"></span>
								</label>
								</td>
								<td>编辑</td>
								<td><label>
									<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
										   type="checkbox">
									<span class="lbl"></span>
								</label>
								</td>
								<td>删除</td>
								<td><label>
									<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
										   type="checkbox">
									<span class="lbl"></span>
								</label>
								</td>
							</tr>

							<tr>
								<td>报表</td>
								<td>查看权</td>
								<td><label>
									<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
										   type="checkbox">
									<span class="lbl"></span>
								</label>
								</td>
								<td>新增</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td>编辑</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td>删除</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
							</tr>

							<tr>
								<td style="padding-right: 79px;">设置</td>
								<td>查看权</td>

								<td style="padding-left: 10px;">
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td>新增</td>

								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>

								<td>编辑</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
								<td>删除</td>
								<td>
									<label>
										<input name="switch-field-1" class="ace ace-switch ace-switch-4 btn-empty"
											   type="checkbox">
										<span class="lbl"></span>
									</label>
								</td>
							</tr>
						</table>

						<button id="zylbutton_one">保存</button>
						<p id="zGBtn">保存并新增</p>
					</div>

				</div>
			</li>


		</ul>

	</div>
</div>
<!-- end -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {
		var zGsingleWidth = $('.zGslider div').width();
		$('.zGslider ul').width(zGsingleWidth * $('.zGslider ul li').length);
		var currIndex = 0;
		var lastIndex = $('.zGslider ul li').length - 1;

		$('#zGBtn').click(function() {
			if(currIndex === lastIndex) {
				alert('新增次数上限！');
				return;
			}
			currIndex++;
			var zGtime = 99 * 9;
			$('#zGtan').slideDown(zGtime);
			$('#zGtan').slideUp(zGtime);
			$('.zGslider ul').animate({
				left: '-=' + zGsingleWidth
			}, 'slow');

		});
	});
</script>